<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东方奇遇传</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/level_map.css">
</head>
<body>
    <div class="main-container">
        <!-- 主菜单 -->
        <div class="menu-container" id="mainMenu">
            <h1 class="game-title">东方奇遇传</h1>
            <div class="menu-options">
                <button class="menu-btn">新游戏</button>
                <button class="menu-btn">读取存档</button>
                <button class="menu-btn">设置</button>
                <button class="menu-btn">退出</button>
            </div>
        </div>

        <!-- 角色选择界面 -->
        <div class="character-select-container" id="characterSelect" style="display: none;">
            <button class="back-btn">返回</button>
            <!-- 角色头像列表 -->
            <div class="character-avatars">
                <!-- 头像会通过JS动态添加 -->
            </div>
            
            <!-- 角色详细信息 -->
            <div class="character-detail">
                <div class="character-preview">
                    <!-- 左侧全身立绘 -->
                    <img class="character-full" src="" alt="">
                </div>
                <div class="character-info">
                    <h2 class="character-name"></h2>
                    <div class="character-trait">
                        <span class="trait-name"></span>
                        <p class="trait-desc"></p>
                    </div>
                    <div class="character-stats">
                        <div class="stat-item">
                            <span class="stat-label">生命值</span>
                            <span class="stat-value hp"></span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">攻击力</span>
                            <span class="stat-value attack"></span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">防御力</span>
                            <span class="stat-value defense"></span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">速度</span>
                            <span class="stat-value speed"></span>
                        </div>
                    </div>
                    <button class="select-btn">选择角色</button>
                </div>
            </div>
        </div>

        <!-- 关卡选择界面 -->
        <div class="level-select-container" id="levelSelect" style="display: none;">
            <button class="back-btn">返回</button>
            <h2 class="level-title" style="color: white; margin-bottom: 2rem;">选择关卡</h2>
            <ul class="level-list">
                <!-- 关卡列表会通过JS动态添加 -->
            </ul>
        </div>

        <!-- 在 main-container div 内添加游戏界面容器 -->
        <div class="game-container" style="display: none;">
            <div class="game-area">
                <div class="map-container">
                    <div class="game-map">
                        <!-- 地图内容会动态生成 -->
                    </div>
                </div>
                <div class="action-panel">
                    <div class="character-section">
                        <div class="current-character">
                            <img src="" alt="" class="character-avatar">
                            <div class="character-info">
                                <div class="character-name"></div>
                                <div class="character-stats">
                                    <div class="stat-bar hp-bar">
                                        <div class="stat-fill hp-fill"></div>
                                        <span></span>
                                    </div>
                                    <div class="stat-bar mp-bar">
                                        <div class="stat-fill mp-fill"></div>
                                        <span></span>
                                    </div>
                                    <div class="stat-bar exp-bar">
                                        <div class="stat-fill exp-fill"></div>
                                        <span></span>
                                    </div>
                                </div>
                                <div class="character-buffs">
                                    <!-- buff图标会动态添加 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="action-list-section">
                        <h3>行动列表</h3>
                        <div class="action-list">
                            <button class="action-btn inventory-btn" data-action="inventory">
                                <span class="btn-icon">🎒</span>
                                <span class="btn-text">使用道具</span>
                            </button>
                            <button class="action-btn switch-btn" data-action="switch">
                                <span class="btn-icon">🔄</span>
                                <span class="btn-text">切换角色</span>
                            </button>
                            <button class="action-btn leave-btn" data-action="leave">
                                <span class="btn-icon">🚪</span>
                                <span class="btn-text">离开关卡</span>
                            </button>
                        </div>
                    </div>
                    <div class="action-section">
                        <!-- 节点特定行动会动态添加 -->
                    </div>
                </div>
            </div>
            <div class="notification"></div>
        </div>
    </div>
    
    <!-- 按依赖顺序引入脚本 -->
    <script src="scripts/character/character_template.js"></script>
    <script src="scripts/character/impl/touhou_character.js"></script>
    <script src="scripts/skiller/skill_template.js"></script>
    <script src="scripts/skiller/skill_dispatch.js"></script>
    <script src="scripts/skiller/impl/mapper.js"></script>
    <script src="scripts/character/impl/characters.js"></script>
    <script src="scripts/character/character_manager.js"></script>
    <script src="scripts/level/level_template.js"></script>
    <script src="scripts/level/level_generator.js"></script>
    <script src="scripts/level/level_map_generator.js"></script>
    <script src="scripts/level/level_config.js"></script>
    <script src="scripts/level/level_map_view.js"></script>
    <script src="scripts/main.js"></script>
    <script src="scripts/items/item_template.js"></script>
    <script src="scripts/items/basic_items.js"></script>
    <script src="scripts/level/shop_view.js"></script>
    <script src="scripts/effects/effect_template.js"></script>
    <script src="scripts/effects/basic_effects.js"></script>
    <script src="scripts/level/mystery_merchant_view.js"></script>
    <script src="scripts/save_system.js"></script>
    <!-- 在body中添加模态框模板 -->
    <template id="shop-modal" class="Modal">
        <div class="shop-content">
            <h2>商店</h2>
            <div class="shop-items">
                <!-- 商店内容会动态生成 -->
            </div>
        </div>
    </template>

    <template id="inventory-modal" class="Modal">
        <div class="inventory-content">
            <h2>背包</h2>
            <div class="inventory-tabs">
                <button class="tab-btn active" data-tab="items">道具</button>
                <button class="tab-btn" data-tab="cards">牌组</button>
            </div>
            <div class="inventory-sections">
                <!-- 背包内容会动态生成 -->
            </div>
        </div>
    </template>

    <template id="message-modal" class="Modal">
        <div class="message-content">
            <h2 class="message-title"></h2>
            <p class="message-text"></p>
            <div class="message-actions">
                <button class="confirm-btn">确定</button>
                <button class="cancel-btn" style="display: none;">取消</button>
            </div>
        </div>
    </template>

    <template id="save-modal" class="Modal">
        <div class="save-content">
            <h2>读取存档</h2>
            <div class="save-info">
                <div class="character-preview">
                    <img src="" alt="角色立绘">
                    <span class="character-name"></span>
                </div>
                <div class="save-details">
                    <!-- 存档详情会动态添加 -->
                </div>
            </div>
            <div class="save-actions">
                <button class="load-btn">读取</button>
                <button class="cancel-btn">取消</button>
            </div>
        </div>
    </template>

    <template id="mystery-merchant-modal" class="Modal">
        <div class="merchant-content">
            <h2>神秘商人</h2>
            <div class="merchant-items">
                <!-- 效果列表会动态生成 -->
            </div>
        </div>
    </template>

    <template id="character-switch-modal" class="Modal">
        <div class="character-switch-content">
            <h2>切换角色</h2>
            <div class="character-list">
                <!-- 角色列表会动态生成 -->
            </div>
        </div>
    </template>

    <script src="scripts/components/modal_manager.js"></script>
    <script src="scripts/components/notification_manager.js"></script>
</body>
</html> 


<style>
    .character-preview{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .character-preview img{
        height: 600px;
    }
</style>